<template>
	<div class="music">
		<img class="classic-img" :class="palying?'rotation':''" :src="img" alt="">
		<img @click="onPlay" class="player-img" :src="palying?pauseSrc:palySrc" alt="">
		<img class="c-tag" src="./images/music@tag.png" alt="">
		<div class="c-content">{{content}}</div>
		<audio :src="src" preload hidden id="music"></audio>
	</div>
</template>
<script>
import pauseSrc from './images/player@pause.png'
import palySrc from './images/player@play.png'
export default{
	name:'music',
	data(){
		return{
			pauseSrc:pauseSrc,
			palySrc:palySrc,
			palying:false,
		}
	},
	props:{
		img:String,
		content:String,
		src:String
	},
	methods:{
		onPlay(){
			let audio=document.getElementById('music')
			if(!this.palying){
				audio.play()
				this._changePlaying(true)
			}else{
				audio.pause()
				this._changePlaying(false)
			}
			audio.addEventListener('ended',()=>{
				console.log(`播放完了`)
				this._changePlaying(false)
			})
		},
		_changePlaying(e){
			this.palying=e
		}
	}
}
</script>
<style lang="stylus" scoped>
.music{display: flex;flex-direction: column;align-items:center;}
.classic-img{width:211px;height:211px;margin-top:30px;border-radius: 50%;}
.player-img{width:60px;height:60px;position: relative;bottom:135px;}
.tag{width:22px;height:64px;position: relative;bottom:80px;right:255px;}
.rotation{transform: rotate(360deg);animation: rotation 12s linear infinite;}
@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
	
</style>